<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <script>
      var _per = window.performance;
      function getmb(size) {
        return Math.floor(size / 1024 / 1024) + "mb";
      }
      function getsec(time) {
        return time / 1000 + "s";
      }
      console.log("内存占用", getmb(_per.memory.usedJSHeapSize));
      console.log(
        "tcp链接时间",
        getsec(_per.timing.connectEnd - _per.timing.connectStart)
      );
      console.log(
        "响应耗时",
        getsec(_per.timing.responseEnd - _per.timing.responseStart)
      );
      // tcp链接时间：用户输入页面到和服务器建立好tcp管道的时间
      // 响应耗时：包括tcp链接时间和后续的请求响应的总时间
      // 其实是tcp和http差别
      // tcp：传输层协议
      // http：应用层协议
      // tcp和ip协议一般一起出现，统称tcp/ip协议，ip协议负责定位资源，tcp协议负责建立管道。
      // 后进入http协议，在管道中传输数据。
      window.onload = function () {
        console.log(
          "dom渲染耗时",
          getsec(_per.timing.domComplete - _per.timing.domLoading)
        );
      };
    </script>
  </body>
</html>
